
<template>
	 <view>
	 	<h3 class="example-info" style="text-align: center;">用户注册</h3>
	 
	 	<uni-forms :rules="rules" :value="formData" ref="form" validate-trigger="bind" err-show-type="undertext">
	 		<uni-group title="" top="0">
	 			<uni-forms-item name="name" required label="用户名">
	 				<uni-easyinput type="text" :inputBorder="true" v-model="formData.name" placeholder="请输入用户名"></uni-easyinput>
	 			</uni-forms-item>

	 			<uni-forms-item name="psw1" required label="密码">
					<uni-easyinput type="password" :inputBorder="true" v-model="formData.psw1" placeholder="请输入密码"></uni-easyinput>
	 			</uni-forms-item>
				
				<uni-forms-item name="psw2" required label="密码">
					<uni-easyinput type="password" :inputBorder="true" v-model="formData.psw2" placeholder="请确认密码"></uni-easyinput>
				</uni-forms-item>
	 		</uni-group>
	 		
	 
	 
	 		<!-- 直接使用组件自带submit、reset 方法，小程序不生效 -->
	 		<!-- 			<button class="button" form-type="submit">Submit</button>
	 			<button class="button" form-type="reset">Reset</button> -->
	 
	 		<view class="example">
	 			<button class="button" @click="submitForm('form')">注册</button>
	 			<button class="button" @click="resetForm">重置表单</button>
	 		</view>
	 	</uni-forms>
	
		<navigator open-type="navigateBack" url="pages/my/register" class="action">
		  <text>已有账户，立即登录</text>
		</navigator>
	 </view>
	   
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					name: '',
					psw1: '',
					psw2: ''
				},
				
				rules: {
					name: {
						rules: [
							{
								required: true,
								errorMessage: '请输入用户名'
							},
							{
								minLength: 3,
								maxLength: 15,
								errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符'
							}
						]
					},
					psw1: {
						rules: [
							{
								required: true,
								errorMessage: '请输入密码'
							},
							{
								minLength: 3,
								maxLength: 6,
								errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符'
							},
						]
					},
					psw2: {
						rules: [
							{
								required: true,
								errorMessage: '请输入密码'
							},
							{
								validateFunction:function(rule,value,data,callback){
									if (value != this.formData.psw1) {
										callback('两密码不一致')
									}
									return true
								}
							}
						]
					}
					
				}
			}
		},
		onLoad() {
			uni.showLoading()
			// this.formData 应该包含所有需要校验的表单
			// 模拟异步请求数据
			setTimeout(() => {
				this.formData = {
					id:'testId',
					name: '',
					psw1: '',
					psw2: '',
				}
				uni.hideLoading()
			}, 500)
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			/**
			 * 手动提交
			 * @param {Object} form
			 */
			submitForm(form) {
				this.$refs[form]
					.validate(['id','remarks'])
					.then(res => {
						console.log('表单的值：', res)
						uni.showToast({
							title: '验证成功'
						})
					})
					.catch(errors => {
						console.error('验证失败：', errors)
					})
			},
	
			/**
			 * 手动重置表单
			 */
			resetForm() {
				this.$refs.form.resetFields()
			},
		}
	}
</script>

<style lang="scss" >
@import '@/common/uni-nvue.scss';

.example {
	padding: 0 10px 10px;
}

.uni-input-border,
.uni-textarea-border {
	// width: 100%;
	flex: 1;
	font-size: 14px;
	color: #666;
	border: 1px #e5e5e5 solid;
	border-radius: 5px;
	/* #ifndef APP-NVUE */
	box-sizing: border-box;
	/* #endif */
}

.uni-input-border {
	padding: 0 10px;
	height: 35px;
}

.uni-textarea-border {
	padding: 10px;
	height: 80px;
}

.label-box {
	margin-right: 10px;
}

.transform-scale {
	transform: scale(0.7);
}

.button {
	margin: 5px 10px;
}
</style>
